import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // 导入useNavigate

import './index.css'; // 假设你的样式在TabBar.css文件中 
// import {} from '../'
function Footer_nav() {
    const [activeIndex, setActiveIndex] = useState(-1); // 初始索引为-1
    const [isFlag, setIsFlag] = useState(false); // 初始状态为false  
    const data = [
        {
            id: "1",
            img: "/src/assets/imgs/智能检测_nor.jpg",
            img_on: "/src/assets/imgs/智能检测_hov.jpg",
            title: "智能检测",
            path: "/homest" // 添加路径字段
        },
        {
            id: "2",
            img: "/src/assets/imgs/就业态势_nor.jpg",
            img_on: "/src/assets/imgs/就业态势_hov.jpg",
            title: "就业态势",
            path: "/homest2" // 添加路径字段
        },
        {
            id: "3",
           img: "/src/assets/imgs/安防管理_nor.jpg",
            img_on: "/src/assets/imgs/安防管理_hov.jpg",
            title: "安防管理",
            path: "/homest3" // 添加路径字段
        },
        {
            id: "4",
            img: "/src/assets/imgs/设备运维_nor.jpg",
            img_on: "/src/assets/imgs/设备运维_hov.jpg",
            title: "设备运维",
            path: "/homest4" // 添加路径字段
        },

    ];
    const navigate = useNavigate();


    // 点击事件  
    const handleTabClick = (index: React.SetStateAction<number>) => {
        // alert(`您点击了${item.title}`);
        setIsFlag(true);
        setActiveIndex(index);
        const path = data[index].path; // 获取对应索引的路径
        navigate(path); // 执行路由跳转
    };

    useEffect(() => {
        const balls = document.querySelectorAll('.ball');
        balls.forEach((ball, i) => {
            ball.style.animationDelay = `${-5 - 3.3 * i}s, ${-3.3 * i}s, ${-3.3 * i}s`;
        });
    }, []);


    return (
        <div className="containe">
            {data.map((item, index) => (
                <div
                    key={index}
                    className='tab'
                    onClick={() => handleTabClick(index)}
                >
                    <img src={activeIndex === index ? item.img_on : item.img} alt="" />
                    <b style={{ fontSize: '15px' }}>{item.title}</b>
                </div>
            ))}
        </div>
    );
}

export default Footer_nav